<template>
	<view class="">
		<view class="member-center">
			<view class="arr" @click='back'>
				<up-icon name="arrow-left" color="#333" size="20"></up-icon>
			</view>
			<view class="fontSize-32 color-333 header-text">
				会员开通
			</view>
		</view>
		<view class="search flex items-center paddingLeft-32 paddingRight-32 paddingTop-40">
			<view class="" style="width: 556rpx;">
				<up-search placeholder="请输入手机号搜索" v-model="member_tel" :showAction='false' @search="search"></up-search>
			</view>
			<!-- <view class="flex items-center" @click="shaixuan">
				<view class="search_title">
					筛选
				</view>
				<image src="../../static/my/shaixuan.png" mode="" class="search_img"></image>
			</view> -->
		</view>
		<view class=" box-sizing borderRadius-30 marginTop-20 lists"
			style="background-color: #FAFAFA; padding: 15rpx 30rpx;" v-if="list.length!=0">
			<view class="" v-for="(i,v) in list" :key="v">
				<view class="flex space-between  marginTop-20 marginBottom-10">
					<view class="fontSize-32 color-333 weight-700">
						{{i.month}}
					</view>
					<view class="flex items-center">
						<view class="marginRight-30 fontSize-28 color-999">
							全部：¥{{i.total_num}}
						</view>
						<view class="fontSize-28 color-999">
							金额：¥{{i.total_amount}}
						</view>
					</view>
				</view>
				<view class="flex space-between items-center box-sizing"
					style=" padding: 30rpx 0;" v-for="(item,index) in i.list"
					:key="index" @click="goDetail(i.pay_id)">
					
					<view class="flex items-center">
						<image :src="item.member_imgae" mode="" class="width-80 height-80 marginRight-16"></image>
						<view class="">
							<view class="fontSize-28 color-333 weight-700">
								{{item.member_type}}会员（¥{{item.amount}}）
							</view>
							<view class="fontSize-26 color-999 marginTop-10">
								{{item.member_tel}}
							</view>
						</view>
						
					</view>
					<view class="flex1">
						<view class="">
							<view class="fontSize-26 color-999 weight-700">
								收益：¥{{item.income}}
							</view>
							<view class="fontSize-24 color-999 marginTop-10">
								{{item.pay_time}}
							</view>
						</view>
					</view>
						
				</view>
			</view>
		
		
		</view>
		<view class="" v-else>
			<image src="../../static/Group.png" mode="" class="no_data_img"></image>
			<view class="no_data_title">
				暂无相关记录
			</view>
		</view>
	</view>
</template>

<script setup>
	import {
		ref,
		inject,
		onMounted
	} from 'vue';
	import {
		onLoad,
		onUnload,
		onShow
	} from '@dcloudio/uni-app';
	const member_tel = ref('')
	const openlistApi = inject('openlist')
	const member_type = ref('')
	const list=ref([])
	onShow(() => {
		getList()
	});
	const back = () => {
		uni.navigateBack()
	}
	const search = () => {
		getList()
	}
	const goDetail = (id) => {
		uni.navigateTo({
			url:'/pagesA/my/memberRecordDetail?id='+id
		})
	}
	
	const getList = () => {
		openlistApi({
			member_tel: member_tel.value,
			member_type: member_type.value
		}).then(res => {
			console.log(res)
			list.value=res
		})
	}
</script>
<style>
	page,body{
		background-color: #fff;
	}
</style>
<style scoped lang="scss">
	.lists{
		width: 686rpx;
		background: #FAFAFA;
		border-radius: 30rpx 30rpx 30rpx 30rpx;
		margin: 20rpx auto 0;
		
	}
	.member-center {
		width: 100%;
		height: 216rpx;
		background-color: #D4FDE2;
		padding-left: 32rpx;
		padding-right: 72px;
		box-sizing: border-box;
		position: relative;
	}

	.arr {
		position: absolute;
		left: 22rpx;
		top: 120rpx;
	}

	.header-text {
		position: absolute;
		left: 50%;
		top: 110rpx;
		transform: translateX(-50%);
	}

	.search {
		width: 690rpx;

		.search_title {
			font-family: PingFang SC, PingFang SC;
			font-weight: 500;
			font-size: 28rpx;
			color: #999999;
			margin-right: 8rpx;
			margin-left: 36rpx;
		}

		.search_img {
			width: 30rpx;
			height: 30rpx;
		}
	}
	.no_data_img{
		width: 160rpx;
		height: 160rpx;
		margin: 230rpx auto 40rpx;
		display: block;
	}
	.no_data_title{
		font-weight: 400;
		font-size: 28rpx;
		color: #999999;
		text-align: center;
	}
</style>